import React, { useEffect,useRef } from 'react'
import { useState } from 'react'
import './index.less'
import { lnglatPost,lnglatGet } from '../../api/other'
export default function BaiDuMap() {
  const mapRef = useRef()
  const [makerList,setMakerList] = useState([]) //响应式存储点标记数据
  const [map,setMap] = useState();
  useEffect(()=>{ //负责初始化地图
    console.log(mapRef);
    let mymap = new BMapGL.Map(mapRef.current); //创建地图对象
    setMap(mymap)
    var point = new BMapGL.Point(106.54,29.59); //创建中心点对象
    mymap.centerAndZoom(point, 15); //设置中心点
    mymap.addEventListener('click', function (e) {
      console.log(e);
      // console.log('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
      let {lng,lat} = e.latlng
      let arr = [lng,lat]
      lnglatPost(arr).then(res=>{   //在线存储经纬度
        setMakerList([...makerList,{'lnglat':arr}])
      }) 
    });

    lnglatGet().then(res=>{ //根据数据库的经纬度，动态添加点标记
      setMakerList(res.data.results)
    })
  },[])
  useEffect(()=>{  //负责更新点标记
    console.log('点标记数据包',makerList,map);
    if(map){
      console.log('渲染点标记');
      makerList.forEach(({lnglat})=>{
        var marker = new BMapGL.Marker(new BMapGL.Point(lnglat[0], lnglat[1]));
        map.addOverlay(marker);
      })
    }
  },[makerList])
  return (
    <>
      <h3>点击地图可以向数据库录入点标记</h3>
      <div id='cont' ref={mapRef}>百度地图加载中...</div>
    </>
  )
}
